<template>
  <div>
    <el-row :gutter="20">
      <splitpanes class="default-theme">
        <!--文件数据-->
        <pane size="16">
          <div>
            <el-scrollbar height="82vh">
              <el-col>
                <div class="head-container">
                  <el-input
                    v-model="coltName"
                    clearable
                    placeholder="请输入栏目名称"
                    prefix-icon="Search"
                    style="margin-bottom: 20px"
                  />
                </div>
                <div>
                  <el-tree
                    :data="data"
                    :props="defaultProps"
                    ref="deptTreeRef"
                    node-key="id"
                    highlight-current
                    @node-click="handleNodeClick"
                    :filter-node-method="filterNode"
                  />
                </div>
              </el-col>
            </el-scrollbar>
          </div>
        </pane>
        <pane size="84">
          <el-col>
            <el-card>
              <!-- 表格部分 -->
              <div style="margin-bottom: 5px; margin-top: 20px">
                <el-button type="primary" plain size="small" @click="onAddMenu"
                  ><el-icon><DocumentAdd /></el-icon>添加</el-button
                >
                <!-- <el-select
                  v-if="isCreateRole"
                  v-model="addMenu"
                  style="width: 200px; margin-right: 10px"
                  placeholder="添加子栏目"
                  @change="onAddMenu"
                  clearable
                >
                  <el-option
                    v-for="item in childColumn"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select> -->
                <el-button
                  type="danger"
                  plain
                  size="small"
                  :disabled="multiple"
                  @click="onDeleteAll"
                  v-if="isDeleteRole"
                  ><el-icon><DeleteFilled /></el-icon>删除</el-button
                >
              </div>
              <el-table
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column
                  type="selection"
                  :selectable="selectable"
                  width="50"
                />
                <el-table-column prop="id" label="ID" />
                <el-table-column prop="name" label="栏目名称"/>
                <!-- <el-table-column prop="path" label="访问路径" width="180" />
                <el-table-column prop="isShow" label="显示" width="180">
                  <template #default="{ row }">
                    <el-tag
                      v-if="row.isShow"
                      :disable-transitions="true"
                      type="success"
                      size="small"
                      >是</el-tag
                    >
                    <el-tag
                      v-else
                      :disable-transitions="true"
                      type="danger"
                      size="small"
                      >否</el-tag
                    >
                  </template>
                </el-table-column> -->
                <el-table-column label="操作" >
                  <template #default="{ row }">
                    <el-button
                      link
                      plain
                      type="primary"
                      size="small"
                      @click="onEdit(row)"
                      v-if="isUpdateRole"
                      ><el-icon><Edit /></el-icon>修改</el-button
                    >
                    <el-button
                      link
                      plain
                      type="primary"
                      size="small"
                      v-if="isDeleteRole"
                      @click="onDelete(row)"
                      ><el-icon><Delete /></el-icon>删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页器 -->
              <pagination
                v-show="total > 0"
                :total="total"
                v-model:page="queryParams.pageNo"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
              />
            </el-card>
          </el-col>
        </pane>
      </splitpanes>
    </el-row>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useStore } from 'vuex'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  getColumnTree,
  getColumnList,
  getchildColumnList,
  deleteColumn
} from '@/api/column/columnList.js'

import { useRouter } from 'vue-router'

const router = useRouter()
const coltName = ref('')
// const addMenu = ref('')
const multiple = ref(true)
const total = ref(0)
const ids = ref([])
const deptTreeRef = ref()
const selectable = ref()
const data = ref([])
const tableData = ref([])
const childColumn = ref([])
const root = ref('')
const isDeleteRole = ref(true)
const isCreateRole = ref(true)
const isUpdateRole = ref(true)

const store = useStore()
const queryParams = ref({
  pageNo: 1,
  pageSize: 10
})
const defaultProps = {
  // children: 'channelExt',
  label: 'label'
}
const userId = store.state.app.user.id
const buttonRole = store.state.app.buttonRole

const getList = () => {
  // 按钮权限
  buttonRole.map((item) => {
    if ('栏目管理'.includes(item.name)) {
      item.children.map((list) => {
        if (list.name === '栏目添加') {
          if (list.isbutton) {
            isCreateRole.value = true
          } else {
            isCreateRole.value = false
          }
        }
        if (list.name === '栏目修改') {
          if (list.isbutton) {
            isUpdateRole.value = true
          } else {
            isUpdateRole.value = false
          }
        }
        if (list.name === '栏目删除') {
          if (list.isbutton) {
            isDeleteRole.value = true
          } else {
            isDeleteRole.value = false
          }
        }
      })
    }
  })
  const params = { root: 'source', userId: userId }
  getColumnTree({ root: params.root, userId: params.userId }).then((res) => {
    const dataList = []
    Object.keys(res.data.map).map((item) => {
      dataList.push({
        id: item,
        label: `${res.data.map[item][0]}`
      })
    })
    const result = [{ id: '', label: '栏目根目录', children: dataList }]
    data.value = result
  })
  getchildColumnList().then((res) => {
    const data = []
    Object.keys(res.data.map).map((item) => {
      data.push({ value: item, label: res.data.map[item] })
    })
    childColumn.value = data
  })
  getColumnList({ root: root.value, ...queryParams.value }).then((res) => {
    res.data.root = res.data.root === null ? '' : res.data.root
    const data = []
    Object.keys(res.data.map).map((item) => {
      data.push({
        id: item,
        name: `${res.data.map[item][0]}`,
        path: res.data.map[item][2],
        isShow: res.data.map[item][3]
      })
    })
    tableData.value = data
    total.value = res.data.total
  })
}

const handleNodeClick = (data) => {
  const { id } = data
  getColumnList({ root: id, ...queryParams.value }).then((res) => {
    root.value = res.data.root === null ? '' : res.data.root
    const data = []
    Object.keys(res.data.map).map((item) => {
      data.push({
        id: item,
        name: `${res.data.map[item][0]}`,
        path: res.data.map[item][2],
        isShow: res.data.map[item][3]
      })
    })
    tableData.value = data
    total.value = res.data.total
  })
}

// 添加
const onAddMenu = () => {
  router.push({ path: 'AddMenu', query: { id: 2 } })
}
// 修改
const onEdit = (row) => {
  console.log(root.value)
  router.push({ path: 'EditMenu', query: { id: row.id, root: root.value } })
}

// 删除
const onDelete = (row) => {
  ElMessageBox.confirm('您确定要删除这条数据吗？', '系统提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      const ids = []
      ids.push(row.id)
      deleteColumn({ ids, root: root.value, userId: userId }).then((res) => {
        if (res.success) {
          ElMessage({
            type: 'success',
            message: res.message
          })
        }
        getList()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      })
    })
}
// 批量删除
const onDeleteAll = () => {
  deleteColumn({ ids: ids.value, root: root.value, userid: userId }).then(
    (res) => {
      if (res.success) {
        ElMessage({
          type: 'success',
          message: res.message
        })
      }
      getList()
    }
  )
}
// 结构树搜索
watch(coltName, (val) => {
  deptTreeRef.value.filter(val)
})

const filterNode = (value, data) => {
  if (!value) return true
  return data.label.includes(value)
}

const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.id)
  multiple.value = !selection.length
}

getList()
</script>

<style lang="scss" scoped>
.splitpanes {
  .splitpanes__pane {
    background-color: #fff;
  }
  .splitpanes__splitter {
    width: 7px !important;
    border-left: 1px solid #eee;
    background-color: #1d1e1f;
    border-color: #303030;

    &:hover {
      background-color: #2d2d2d;
    }

    &:before,
    &:after {
      background-color: #303030;
    }
  }
}
.head-container {
  position: sticky;
  top: 0;
  z-index: 100;
}
::v-deep {
  .el-table {
    .el-table__header-wrapper {
      th {
        word-break: break-word;
        background-color: #f8f8f9 !important;
        color: #515a6e;
        height: 40px !important;
        font-size: 13px;
      }
    }
  }
}
::v-deep {
  .el-textarea__inner {
    height: 230px;
  }
}

::v-deep {
  .el-form {
    .el-form-item {
      .el-form-item__label {
        font-weight: bold !important;
      }
    }
  }
}
::v-deep {
  .el-form-item__content {
    .el-textarea {
      .el-textarea__inner {
        height: 100px !important;
      }
    }
  }
}
</style>
